<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置管理</title>
    <script src="/static/js/jquery.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .service-controls {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        .control-buttons {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        .control-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }
        .btn-start {
            background-color: #28a745;
            color: white;
        }
        .btn-start:hover {
            background-color: #218838;
        }
        .btn-stop {
            background-color: #dc3545;
            color: white;
        }
        .btn-stop:hover {
            background-color: #c82333;
        }
        .btn-status {
            background-color: #17a2b8;
            color: white;
        }
        .btn-status:hover {
            background-color: #138496;
        }
        .status-output {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>配置参数管理</h1>
    <form id="configForm">
        <div class="form-group">
            <label for="__GNB_IP__">GNB IP:</label>
            <input type="text" id="__GNB_IP__" name="__GNB_IP__" required>
        </div>
        
        <div class="form-group">
            <label for="__AMF_IP__">AMF IP:</label>
            <input type="text" id="__AMF_IP__" name="__AMF_IP__" required>
        </div>
        
        <div class="form-group">
            <label for="__UPF_IP__">UPF IP:</label>
            <input type="text" id="__UPF_IP__" name="__UPF_IP__" required>
        </div>
        
        <div class="form-group">
            <label for="__MCC__">MCC:</label>
            <input type="text" id="__MCC__" name="__MCC__" required>
        </div>
        
        <div class="form-group">
            <label for="__MNC__">MNC:</label>
            <input type="text" id="__MNC__" name="__MNC__" required>
        </div>
        
        <div class="form-group">
            <label for="__TAC__">TAC:</label>
            <input type="text" id="__TAC__" name="__TAC__" required>
        </div>
        
        <div class="form-group">
            <label for="__IPSEC_IP__">IPSEC IP:</label>
            <input type="text" id="__IPSEC_IP__" name="__IPSEC_IP__" required>
        </div>
        
        <button type="submit">保存配置</button>
    </form>
    
    <div id="message"></div>
    
    <!-- 服务控制区域 -->
    <div class="service-controls">
        <h2>服务控制</h2>
        <div class="control-buttons">
            <button class="control-btn btn-start" onclick="executeCommand('start')">启动服务</button>
            <button class="control-btn btn-stop" onclick="executeCommand('stop')">停止服务</button>
            <button class="control-btn btn-status" onclick="executeCommand('status')">检查状态</button>
        </div>
        <div>
            <label>执行结果：</label>
            <div id="statusOutput" class="status-output"></div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 页面加载时获取当前配置
            loadConfig();
            
            // 表单提交处理
            $('#configForm').on('submit', function(e) {
                e.preventDefault();
                saveConfig();
            });
        });

        function loadConfig() {
            $.ajax({
                url: '/receive',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    cmdType: 'getConfig'
                }),
                success: function(data) {
                    if (data._status && data._status !== 0) {
                        showMessage('获取配置失败: ' + data._msg, 'error');
                    } else {
                        // 填充表单数据
                        for (const [key, value] of Object.entries(data.data)) {
                            const element = document.getElementById(key);
                            if (element) {
                                element.value = value;
                            }
                        }
                    }
                },
                error: function(xhr, status, error) {
                    showMessage('获取配置失败: ' + error, 'error');
                }
            });
        }

        function saveConfig() {
            const formData = {};
            $('#configForm input').each(function() {
                formData[this.name] = this.value;
            });
            
            $.ajax({
                url: '/receive',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    cmdType: 'updateConfig',
                    params: formData
                }),
                success: function(data) {
                    if (data._status && data._status !== 0) {
                        showMessage('保存失败: ' + data._msg, 'error');
                    } else {
                        showMessage('配置保存成功!', 'success');
                    }
                },
                error: function(xhr, status, error) {
                    showMessage('保存失败: ' + error, 'error');
                }
            });
        }

        function showMessage(text, type) {
            const messageDiv = $('#message');
            messageDiv.text(text);
            messageDiv.attr('class', 'message ' + type);
            
            // 3秒后自动隐藏消息
            setTimeout(() => {
                messageDiv.text('');
                messageDiv.attr('class', '');
            }, 3000);
        }

        function executeCommand(cmdType) {
            // 禁用按钮防止重复点击
            const buttons = $('.control-btn');
            buttons.prop('disabled', true);
            
            // 显示执行中状态
            showStatusOutput('正在执行 ' + getCommandName(cmdType) + '...');
            
            $.ajax({
                url: '/receive',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    cmdType: cmdType
                }),
                success: function(data) {
                    if (data.code === 0) {
                        const output = data.data && data.data.output ? data.data.output : data.msg || '执行成功';
                        showStatusOutput(output);
                        showMessage(getCommandName(cmdType) + ' 执行成功!', 'success');
                    } else {
                        showStatusOutput('错误: ' + (data.msg || '执行失败'));
                        showMessage(getCommandName(cmdType) + ' 执行失败: ' + data.msg, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    showStatusOutput('请求失败: ' + error);
                    showMessage(getCommandName(cmdType) + ' 请求失败: ' + error, 'error');
                },
                complete: function() {
                    // 重新启用按钮
                    buttons.prop('disabled', false);
                }
            });
        }

        function getCommandName(cmdType) {
            const names = {
                'start': '启动服务',
                'stop': '停止服务',
                'status': '状态检查'
            };
            return names[cmdType] || cmdType;
        }

        function showStatusOutput(text) {
            const outputDiv = $('#statusOutput');
            const timestamp = new Date().toLocaleTimeString();
            outputDiv.text(`[${timestamp}] ${text}`);
        }
    </script>
</body>
</html>